<template>
  <div class="house-card">
    <div class="house-card-content van-hairline--bottom">
      <!-- 左边图片 区域 -->
      <van-image class="house-card-image" width="105" height="80" lazy-load src="https://img.yzcdn.cn/vant/cat.jpeg" />

      <!-- 右边文字 区域 -->
      <div class="house-card-text">
        <div class="house-card-title-wrapper van-ellipsis">
          <span class="house-card-title">{{ title }}</span>
        </div>
        <div class="house-card-desc-wrapper van-ellipsis">
          <span class="house-card-desc">89㎡ / </span>
          <span class="house-card-desc">朝南 / </span>
          <span class="house-card-desc">第13层 共34层</span>
        </div>
        <div class="house-card-tags-wrapper van-ellipsis">
          <van-tag round plain type="primary">新上房源</van-tag>
          <van-tag round plain type="success">随时可看</van-tag>
          <van-tag round plain type="danger">VR看房</van-tag>
          <van-tag round plain type="warning">满5年</van-tag>
        </div>
        <div class="house-card-price-wrapper van-ellipsis">
          <span class="house-card-price-total">{{ totalPrice }}万</span>
          <span class="house-card-price-average">{{ averagePrice }}元/㎡</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Tag } from 'vant'
export default {
  name: 'HouseCard',
  components: {
    [Tag.name]: Tag
  },
  props: {
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    totalPrice: {
      type: Number,
      default: () => {
        return 0
      }
    },
    averagePrice: {
      type: Number,
      default: () => {
        return 0
      }
    }
  }
}
</script>

<style scoped lang="less">
.house-card {
  width: 100%;
  min-height: 80px;
  background: @white;
  padding: 0 @padding-15;
  .house-card-content {
    display: flex;
    padding: @padding-15 0;
    .house-card-text {
      flex: 1;
      overflow: hidden;
      padding-left: @padding-15;
      .house-card-title-wrapper {
        font-size: @font-size-lg;
        font-weight: @font-weight-bold;
        line-height: @line-height-1;
        .house-card-title {
          color: @text-color;
        }
      }
      .house-card-desc-wrapper {
        color: @gray-6;
        font-size: @font-size-11;
        line-height: @line-height-1;
        padding-top: 8px;
      }
      .house-card-tags-wrapper {
        padding-top: 5px;
        .van-tag {
          font-size: @font-size-11;
          margin-right: @padding-base;
        }
      }
      .house-card-price-wrapper {
        padding-top: 5px;
        .house-card-price-total {
          color: @red;
          font-size: @font-size-lg;
          font-weight: @font-weight-bold;
          line-height: @line-height-1;
          margin-right: @padding-15;
        }
        .house-card-price-average {
          color: @gray-6;
          font-size: @font-size-11;
          line-height: @line-height-1;
        }
      }
    }
  }
}
</style>
